<template>
  <view>
    <u-navbar back-icon-color="#333" title="土地详情" title-color="#333" title-size="36">
    </u-navbar>
    <view class="top">
      <u-swiper
        v-if="jkType == 0"
        :list="bannerList"
        @click="onPreview"
        height="420"
        border-radius="0"
        mode="number"
        indicator-pos="bottomRight"
      ></u-swiper>
      <view class="video-box" v-if="jkType == 1">
        <video
          class="video"
          src=""
          object-fit="fill"
          poster="https://cdn.uviewui.com/uview/swiper/1.jpg"
        ></video>
      </view>
      <view class="top-type dis-flex">
        <view class="type-item" :class="jkType == 0 ? 'checked' : ''" @click="jkType = 0"
          >实景图片</view
        >
        <view class="type-item" :class="jkType == 1 ? 'checked' : ''" @click="jkType = 1"
          >实时监控</view
        >
      </view>
    </view>
    <u-gap height="10"></u-gap>
    <view class="card jidi-box">
      <view class="name">贵阳绿色农庄蔬菜种植示范基地</view>
      <view class="price">
        价格：<text class="red">¥</text><text class="red num">2888</text>起
      </view>
      <view class="rule-box">
        <view class="rule-box-item dis-flex flex-y-between">
          <view class="t-l dis-flex flex-y-center">
            <view class="dot"></view>
            <view class="t-p">定金：¥300 </view>
            <view class="t-d">租赁下单支付</view>
          </view>
          <view class="dis-flex flex-y-center">
            <view class="des-c">说明</view>
            <u-icon name="/static/tishi-b.png" size="28"></u-icon>
          </view>
        </view>
        <view class="rule-box-item weikuan">
          <view class="t-l dis-flex flex-y-center">
            <view class="dot"></view>
            <view class="t-p">尾款：？ </view>
            <view class="t-d">成熟采摘期开始支付</view>
          </view>
        </view>
      </view>
      <view class="content">
        可种植的蔬菜种类有：白菜、白萝卜、青椒、西红柿、红萝卜、西蓝花、土豆、油麦菜等，可现场实地体验观察，寻觅一处远离喧嚣的净土为家人种上属于自己的绿色食材；
      </view>
    </view>
    <u-gap height="20"></u-gap>
    <view class="card store-box dis-flex flex-y-between flex-y-center">
      <view class="store-l">
        <view class="store-l-t dis-flex flex-y-center">
          <view class="tl">贵阳天然绿色农庄天然绿色农庄</view>
          <u-icon name="/static/more.png" size="28"></u-icon>
        </view>
        <view class="store-l-add dis-flex flex-y-center">
          <u-icon name="/static/dw-h.png" size="28"></u-icon>
          <view class="tl oneline-hide-1">贵州省贵阳市南明区花果园大街贵州省贵阳贵阳</view>
        </view>
      </view>
      <view class="store-r dis-flex">
        <view class="store-r-i dis-flex flex-y-center">
          <u-icon name="/static/dhd.png" size="32"></u-icon>
          <view class="tl">导航</view>
        </view>
        <view class="store-r-i dis-flex flex-y-center">
          <u-icon name="/static/bh.png" size="32"></u-icon>
          <view class="tl">电话</view>
        </view>
      </view>
    </view>
    <u-gap height="20"></u-gap>
    <view class="card tudi-box">
      <view class="tudi-top dis-flex flex-y-between flex-y-center">
        <view class="card-tl">选择地块</view>
        <view class="r">剩余5/10</view>
      </view>
      <view class="tishi dis-flex flex-y-around">
        <view class="tishi-i dis-flex flex-y-center">
          <u-icon name="/static/farm/ky.png" size="28"></u-icon>
          <view class="tl">未租</view>
        </view>
        <view class="tishi-i dis-flex flex-y-center">
          <u-icon name="/static/farm/yy.png" size="28"></u-icon>
          <view class="tl">已租</view>
        </view>
      </view>
      <scroll-view scroll-x class="scrollView" :show-scrollbar="false" :enhanced="true">
        <view class="td-list">
          <view class="td-item">
            <view class="box" style="background-image: url(../../static/farm/kxz.png)">
              ㎡ 有 机 土 地
            </view>
            <u-icon name="/static/selected.png" size="36"></u-icon>
          </view>
          <view class="td-item">
            <view class="box" style="background-image: url(../../static/farm/kxz.png)"
              >20 ㎡ 有 机 土 地</view
            >
            <u-icon name="/static/unselect.png" size="36"></u-icon>
          </view>
          <view class="td-item">
            <view class="box" style="background-image: url(../../static/farm/kxz.png)"
              >20 ㎡ 有 机 土 地</view
            >
            <u-icon name="/static/unselect.png" size="36"></u-icon>
          </view>
          <view class="td-item">
            <view class="box" style="background-image: url(../../static/farm/kxz.png)"
              >20 ㎡ 有 机 土 地</view
            >
            <u-icon name="/static/unselect.png" size="36"></u-icon>
          </view>
          <view class="td-item">
            <view class="box" style="background-image: url(../../static/farm/bkx.png)"
              >20 ㎡ 有 机 土 地</view
            >
            <u-icon name="/static/unselect.png" size="36"></u-icon>
          </view>
          <view class="td-item">
            <view class="box" style="background-image: url(../../static/farm/bkx.png)"
              >20 ㎡ 有 机 土 地</view
            >
            <u-icon name="/static/unselect.png" size="36"></u-icon>
          </view>
          <view class="td-item">
            <view class="box" style="background-image: url(../../static/farm/bkx.png)"
              >20 ㎡ 有 机 土 地</view
            >
            <u-icon name="/static/unselect.png" size="36"></u-icon>
          </view>
          <view class="td-item">
            <view class="box" style="background-image: url(../../static/farm/bkx.png)"
              >20 ㎡ 有 机 土 地</view
            >
            <u-icon name="/static/unselect.png" size="36"></u-icon>
          </view>
          <view class="td-item">
            <view class="box" style="background-image: url(../../static/farm/bkx.png)"
              >20 ㎡ 有 机 土 地</view
            >
            <u-icon name="/static/unselect.png" size="36"></u-icon>
          </view>
        </view>
      </scroll-view>
    </view>
    <u-gap height="20"></u-gap>
    <view class="card zhouqi dis-flex flex-y-center flex-y-between">
      <view class="card-tl">租赁周期</view>
      <view class="dis-flex flex-y-center">
        <text class="zhouqi-des">一年</text>
        <u-icon name="/static/enter.png" size="24"></u-icon>
      </view>
    </view>
    <u-gap height="20"></u-gap>
    <view class="card zhongz">
      <view class="zhongz-top dis-flex flex-y-between flex-y-center">
        <view class="card-tl">种子列表</view>
        <view class="dis-flex flex-y-center">
          <text class="zhouqi-des">查看更多</text>
          <u-icon name="/static/enter.png" size="24"></u-icon>
        </view>
      </view>
      <view class="zhongz-list dis-flex">
        <view class="zhongz-item dis-flex flex-y-center">
          <u-image width="120rpx" height="120rpx" src="" border-radius="10"></u-image>
          <view class="item-con dis-flex flex-y-between">
            <view class="con-tl">优种大白菜</view>
            <view class="con-yj">预计产量：30kg/㎡</view>
          </view>
        </view>
        <view class="zhongz-item dis-flex flex-y-center">
          <u-image width="120rpx" height="120rpx" src="" border-radius="10"></u-image>
          <view class="item-con dis-flex flex-y-between">
            <view class="con-tl">优种大白菜</view>
            <view class="con-yj">预计产量：30kg/㎡</view>
          </view>
        </view>
        <view class="zhongz-item dis-flex flex-y-center">
          <u-image width="120rpx" height="120rpx" src="" border-radius="10"></u-image>
          <view class="item-con dis-flex flex-y-between">
            <view class="con-tl">优种大白菜</view>
            <view class="con-yj">预计产量：30kg/㎡</view>
          </view>
        </view>
        <view class="zhongz-item dis-flex flex-y-center">
          <u-image width="120rpx" height="120rpx" src="" border-radius="10"></u-image>
          <view class="item-con dis-flex flex-y-between">
            <view class="con-tl">优种大白菜</view>
            <view class="con-yj">预计产量：30kg/㎡</view>
          </view>
        </view>
        <view class="zhongz-item dis-flex flex-y-center">
          <u-image width="120rpx" height="120rpx" src="" border-radius="10"></u-image>
          <view class="item-con dis-flex flex-y-between">
            <view class="con-tl">优种大白菜</view>
            <view class="con-yj">预计产量：30kg/㎡</view>
          </view>
        </view>
        <view class="zhongz-item dis-flex flex-y-center">
          <u-image width="120rpx" height="120rpx" src="" border-radius="10"></u-image>
          <view class="item-con dis-flex flex-y-between">
            <view class="con-tl">优种大白菜</view>
            <view class="con-yj">预计产量：30kg/㎡</view>
          </view>
        </view>
      </view>
    </view>
    <u-gap height="20"></u-gap>
    <view class="card zhongz">
      <view style="margin-bottom: 20rpx">
        <view class="card-tl">土地详情</view>
      </view>
      <u-image width="710rpx" height="360rpx" src=""></u-image>
    </view>
    <u-gap height="100"></u-gap>
    <view class="fixed-wapper">
      <view class="bt-box dis-flex flex-y-center flex-y-between">
        <view class="floor-tip dis-flex">
          <view class="tip-item">
            <u-icon name="/static/farm/sy.png" size="36"></u-icon>
            <view>首页</view>
          </view>
          <view class="tip-item">
            <u-icon name="/static/farm/kf.png" size="36"></u-icon>
            <view>客服</view>
          </view>
        </view>
        <view @click="routeTo('/other/apply_join/apply_join')" class="submit-btn btn">
          立即租地
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      jkType: 0,
      bannerList: [
        {
          image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
          title: '昨夜星辰昨夜风，画楼西畔桂堂东',
          url: 'https://cdn.uviewui.com/uview/swiper/1.jpg'
        },
        {
          image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
          title: '身无彩凤双飞翼，心有灵犀一点通'
        },
        {
          image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
          title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
        }
      ]
    }
  },
  methods: {
    onPreview(e) {
      uni.previewImage({
        current: e,
        urls: this.bannerList
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import url('@/style/btn.css');

.top {
  .video-box {
    margin-bottom: 0;
    height: 420rpx;

    .video {
      width: 100%;
      height: 100%;
    }
  }

  .top-type {
    height: 80rpx;
    background: #ffffff;
    border-radius: 10rpx;
    text-align: center;
    justify-content: center;

    .type-item {
      margin-top: 19rpx;
      width: 120rpx;
      height: 42rpx;
      background: #dbdbdb;
      border-radius: 21rpx;
      font-size: 22rpx;
      text-align: center;
      line-height: 42rpx;
      margin-right: 20rpx;
    }

    .type-item:last-child {
      margin-right: 0;
    }

    .checked {
      background: #10a28f;
      color: #ffffff;
    }
  }
}

.card {
  background: #ffffff;
  padding: 20rpx;

  .card-tl {
    font-size: 28rpx;
    color: #333333;
  }
}

.scrollView {
  width: 100%;
  white-space: nowrap;
  box-sizing: border-box;

  .td-item {
    display: inline-block;
  }
}

.jidi-box {
  .red {
    color: #fa453c;
  }

  .num {
    font-size: 32rpx;
    font-weight: bold;
  }

  .name {
    font-weight: 600;
    font-size: 30rpx;
    margin-bottom: 20rpx;
  }

  .price {
    font-size: 26rpx;
    margin-bottom: 20rpx;
  }

  .rule-box {
    height: 120rpx;
    background: #c4f5ee;
    border-radius: 10rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;

    &-item {
      .t-l {
        color: #10a28f;

        .dot {
          width: 20rpx;
          height: 20rpx;
          background: #10a28f;
          border-radius: 10rpx;
          margin-right: 10rpx;
        }

        .t-p {
          font-size: 26rpx;
          width: 180rpx;
        }

        .t-d {
          font-size: 24rpx;
        }
      }

      .des-c {
        font-size: 24rpx;
        color: #999999;
        margin-right: 10rpx;
      }
    }

    .weikuan {
      margin-top: 10rpx;

      .t-l {
        color: #ff6f10;

        .dot {
          background: #ff6f10;
        }
      }
    }
  }

  .content {
    font-size: 24rpx;
    color: #999999;
  }
}

.store-box {
  .store-l {
    &-t {
      margin-bottom: 30rpx;

      .tl {
        font-size: 34rpx;
        color: #333333;
      }
    }

    &-add {
      font-size: 26rpx;
      color: #999999;
    }
  }

  .store-r {
    width: 25%;

    &-i {
      flex-flow: column;
      font-size: 26rpx;
      color: #333333;
      margin-left: 20rpx;

      .tl {
        margin-top: 4rpx;
      }
    }

    .store-r-i:last-child {
      margin-left: 30rpx;
    }
  }
}

.tudi-box {
  .tudi-top {
    margin-bottom: 20rpx;

    .r {
      font-size: 24rpx;
      color: #999999;
    }
  }

  .tishi {
    font-size: 24rpx;
    color: #333333;
    padding: 0 100rpx;
    margin-bottom: 30rpx;

    .tl {
      margin-left: 10rpx;
    }
  }

  .td-item {
    text-align: center;
    margin-right: 37rpx;

    .box {
      width: 56rpx;
      height: 201rpx;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      writing-mode: vertical-rl;
      font-size: 20rpx;
      color: #ffffff;
      text-align: center;
      line-height: 56rpx;
      margin-bottom: 20rpx;
    }
  }

  .td-item:last-child {
    margin-right: 0;
  }
}

.zhouqi-des {
  margin-right: 10rpx;
}

.zhongz {
  .zhongz-top {
    margin-bottom: 40rpx;

    .zhouqi-des {
      font-size: 24rpx;
      color: #999999;
    }
  }

  .zhongz-list {
    flex-wrap: wrap;

    .zhongz-item {
      width: 50%;
      font-size: 24rpx;
      margin-bottom: 20rpx;

      .item-con {
        height: 120rpx;
        padding: 10rpx;
        flex-flow: column;

        .con-yj {
          color: #999999;
        }
      }
    }
  }
}

.fixed-wapper {
  background-color: #fff;
  width: 100%;
  left: 0;
  .bt-box {
    height: 96rpx;
    padding: 13rpx 20rpx;
    box-shadow: -1rpx -1rpx 2px 0px #eeeeef;
  }
  .floor-tip {
    .tip-item {
      height: 100%;
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: space-between;
      margin-right: 50rpx;
      font-size: 24rpx;
    }
    .tip-item:last-child {
      margin-right: 0;
    }
  }
  .submit-btn {
    height: 70rpx;
    line-height: 70rpx;
    width: 280rpx;
    border-radius: 35rpx;
  }
}
</style>
